<!-- userAdd -->
<template>
	<div class="userAdd">
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/admin/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>用户管理</el-breadcrumb-item>
			<el-breadcrumb-item>添加用户</el-breadcrumb-item>
		</el-breadcrumb>

		<el-card>
			<el-form
				:model="addUserForm"
				:rules="addUserRules"
				ref="addUserRef"
				status-icon
				label-width="80px"
			>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="addUserForm.username" clearable></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="addUserForm.password" clearable show-password></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="addUserForm.phone" clearable type="tel"></el-input>
				</el-form-item>
				<el-form-item label="年龄" prop="age">
					<el-input v-model="addUserForm.age" clearable type="number"></el-input>
				</el-form-item>
				<el-form-item label="地址" prop="address">
					<el-input v-model="addUserForm.address" clearable type="address"></el-input>
				</el-form-item>
				<el-form-item label="头像">
					<el-upload
						class="avatar-uploader"
						action="http://localhost:8000/api/utils/upload/"
						name="avatar"
						:limit="1"
						ref="avatarUploadRef"
						:on-success="handleAvatarSuccess"
						:on-remove="handleAvatarRemove"
					>
						<img v-if="addUserForm.avatar" :src="addUserForm.avatar" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
				</el-form-item>
				<el-form-item label="用户身份">
					<el-radio-group v-model="addUserForm.level" size="mini">
						<el-radio :label="0" border>普通用户</el-radio>
						<el-radio :label="1" border>学生</el-radio>
						<el-radio :label="2" border>教师</el-radio>
						<el-radio :label="3" border>超级管理</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否显示">
					<el-radio-group v-model="addUserForm.is_show" size="mini">
						<el-radio :label="1" border>显示</el-radio>
						<el-radio :label="0" border>隐藏</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="是否删除">
					<el-radio-group v-model="addUserForm.is_delete" size="mini">
						<el-radio :label="1" border>允许删除</el-radio>
						<el-radio :label="0" border>禁止删除</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('addUserRef')">立即创建</el-button>
					<el-button @click="resetForm('addUserRef')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
//import <组件名称> from '<组件路径>';
import { userAddApi } from '@/api/user.js';
export default {
	//注册import导入的组件
	components: {},
	//数据
	data() {
		return {
			addUserForm: {
				username: '',
				password: '',
				phone: '',
				age: '',
				address: '',
				level: 0,
				avatar: '',
				is_show: 1,
				is_delete: 1,
			},
			addUserRules: {
				username: [
					{ required: true, message: '请输入用户', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
				],
				phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
			},
		};
	},
	//计算属性
	computed: {},
	//侦听器
	watch: {},
	//方法
	methods: {
		handleAvatarSuccess(response) {
			this.addUserForm.avatar = 'http://localhost:8000/' + response.data.data.path;
		},
		handleAvatarRemove() {
			this.addUserForm.avatar = '';
		},
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					try {
						await userAddApi(this.addUserForm);
						// vue-router中 / 表示为跟路径 若没有则表示当前最近一级路由
						this.$router.push('list');
					} catch (error) {
						this.$message.error(error.response.data.meta.message);
						return false;
					}
				} else {
					this.$message.error('信息填写不完整');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.$refs['avatarUploadRef'].clearFiles();
			this.addUserForm.avatar = '';
			this.$refs[formName].resetFields();
		},
	},
};
</script>
<style lang="less" scope>
.userAdd {
	.el-form {
		.el-radio {
			margin-right: 15px;
		}
	}
}
</style>
